<template>
	<!-- 新增维修项目管理 -->
	<el-dialog custom-class="mainProjectDialog" :close-on-click-modal='false' :append-to-body='true' :before-close='close' :close-on-press-escape='false'
	 :title="title" :visible.sync="addAndCompileShow">
		<el-form :model="form" :rules="rules" ref="form" v-loading='isLoading' label-width="100px">
			<!-- <div class="textLeft titleMessNow">单位信息</div> -->
			<el-row>
				<el-col :span="13">
					<el-form-item label="维修类型:" prop="mainType">
						<el-select filterable remote reserve-keyword :remote-method="remoteMethod" :disabled="detailDisable || isChangeList" :loading="selecteLoading"
						 clearable v-model="form.mainType" placeholder="请选择维修类型" size="mini" @change="changeSelect">
							<el-option v-for='item in mainTypeArr' :key='item.id' :label='item.name' :value='item.id'></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="4" style='margin-top: 6px;' v-if="!detailDisable">
					<el-button type="primary" size="mini" @click='compileTypes'>编辑类型</el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="16">
					<el-form-item label="项目名称:" prop="name">
						<el-input type="text" v-model="form.name"  placeholder="请输入项目名称" clearable :disabled="detailDisable || isChangeList" size="mini"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="16">
					<el-form-item label="维修内容:">
						<el-input type="textarea" v-model="form.textareaContent" maxlength="300" :rows="5" placeholder="请输入维修内容"
						 show-word-limit resize='none' clearable :disabled="detailDisable || isChangeList"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="16">
					<el-form-item label="维修备注:">
						<el-input type="textarea" v-model="form.textareaRemark" maxlength="300" :rows="5" placeholder="请输入维修备注"
						 show-word-limit resize='none' clearable :disabled="detailDisable || isChangeList"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="16">
					<el-form-item label="维修费用:">
						<el-input v-model="form.cost" type='number' label="请输入维修费用" size="mini" :disabled="detailDisable" clearable @blur='costPayBlur'></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="2">
					<span style="display: inline-block;margin-top: 10px;">(元)</span>
				</el-col>
			</el-row>
		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button @click="close">取 消</el-button>
			<el-button type="primary" @click="submit('form')" v-loading='ensureBtn' v-if="!detailDisable">确 定</el-button>
		</div>
		<MaintypesList v-if='appendDialogShow' :appendDialogShow='appendDialogShow' @closeAppendDialog='closeAppendDialog'></MaintypesList>
	</el-dialog>
</template>

<script>
	import {
		mainType,
		textareaContent,
		textareaRemark,
		cost,
		name
	} from './rules.js'
	import MaintypesList from './maintypesList'
	import {
		axiosPost,
		axiosGet,
		loadFn,
		axiosChange,
	} from "@/common.js"
	export default {
		components: {
			MaintypesList
		},
		props: ['addAndCompileShow', 'changeAddTitle', 'rowId','isChangeList'],
		mounted() {
			console.log(this.isChangeList)
			this.getMainType()
			if (this.rowId && this.title == '编辑维修项目' || this.title == '维修项目详情') {
				this.isLoading = true
				this.getCompileData()
			}
			if (this.title == '维修项目详情') {
				this.detailDisable = true
			}
		},
		data() {
			return {
				ensureBtn: false,
				isLoading: false,
				detailDisable: false,
				selecteLoading: false,
				appendDialogShow: false,
				selectedQuery: '',
				form: {
					mainType: '',
					textareaContent: '',
					textareaRemark: '',
					cost: 0,
					name:''
				},
				rules: {
					mainType,
					textareaContent,
					textareaRemark,
					cost,
					name
				},
				mainTypeArr: [],
			}
		},
		computed: {
			title() {
				if (this.changeAddTitle == 1) {
					return '添加维修项目'
				} else if (this.changeAddTitle == 2) {
					return '编辑维修项目'
				} else {
					return '维修项目详情'
				}
			}
		},
		methods: {
			//维修费用失去焦点
			costPayBlur(){
				if(!this.form.cost){
					this.form.cost = 0
				}
			},
			//获取编辑数据
			getCompileData() {
				let url = '/manu/elevator/content/' + this.rowId
				axiosGet(url, {}, (res) => {
					this.isLoading = false
					if (res.code == 0) {
						this.form.mainType = res.detail.repair_type
						this.mainTypeArr = [{
							id: this.form.mainType,
							name: res.detail.repair_type_name
						}]
						this.form.textareaContent = res.detail.content
						this.form.textareaRemark = res.detail.comment
						this.form.cost = res.detail.costs
						this.form.name = res.detail.name
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//获取维修类型
			getMainType() {
				let params = {
					page: 1,
					page_size: 30,
					query: this.selectedQuery
				}
				axiosGet('/manu/elevator/type/', params, (res) => {
					this.selecteLoading = false
					if (res.code == 0) {
						this.mainTypeArr = res.detail.results
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//编辑维修类型
			compileTypes() {
				this.appendDialogShow = true
			},
			//关闭编辑维修类型
			closeAppendDialog() {
				this.appendDialogShow = false
				this.getMainType()
			},
			changeSelect(res) {
				if (!res) {
					this.getMainType()
				}
			},
			//维修类型过滤
			remoteMethod(query) {
				if (query) {
					this.selecteLoading = true;
					this.selectedQuery = query
					this.getMainType()
				} else {
					this.selectedQuery = ''
					this.getMainType()
				}
			},
			//提交
			submit(ruleForm) {
				this.$refs[ruleForm].validate((valid) => {
					if (valid) {
						this.ensureBtn = true
						let data = {
							content: this.form.textareaContent, // 项目
							repair_type: this.form.mainType, // 传维修类型的id
							comment: this.form.textareaRemark, // 描述
							name:this.form.name,
							costs: this.form.cost
						}
						let url = ''
						let method = ''
						if (this.rowId && this.title == '编辑维修项目') {
							url = '/manu/elevator/content/' + this.rowId
							method = 'put'
						} else {
							url = '/manu/elevator/content/'
							method = 'post'
						}
						axiosChange(url, method, data, (res) => {
							this.ensureBtn = false
							if (res.code == 0) {
								this.$message({
									type: 'success',
									message: '操作成功'
								})
								this.$emit('upDateList')
							} else {
								if(res.code == 40419){
									this.form.name = ''
									this.$message.error('维修项目名称不可重复！')
								}else{
									this.$message.error(res.detail.result)
								}
								
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//取消
			close() {
				this.$emit('closeAddDialog')
			}
		}
	}
</script>

<style>
</style>
